import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Immutable,{Map,is } from 'immutable';
class App extends Component {
  constructor(){
    super();
    this.state = {
      data:Map({items:'Welcome to React',alert:" To get started, edit src/App.js and save to reload."}),
    }
  }
  shouldComponentUpdate(nextProps,nextState){
    //debugger
    const thisProps = this.props || {}, thisState = this.state || {};
    
      if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
          Object.keys(thisState).length !== Object.keys(nextState).length) {
        return true;
      }
    
      for (const key in nextProps) {
        if (!is(thisProps[key], nextProps[key])) {
          return true;
        }
      }
    
      for (const key in nextState) {
        if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) {
          return true;
        }
      }
      console.log(nextState);//state相同不执行render
      return false;
  }
  handleClick = ()=>{
    this.setState(({data,alert})=>({
      data:data.update('alert',v=>v+"update").update('items',v=>v+"update")
    })
    );
  }
  render() {
    const {data} = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">{data.getIn(['items'])}</h1>
        </header>
        <p className="App-intro">{data.getIn(['alert'])}
        </p>
        <button onClick={this.handleClick}>触发setState</button>
      </div>
    );
  }
}

export default App;
